<template>
  <div>
    <el-dialog title="更换新手机号码" :visible.sync="visible" width="30%" @close="close">
<!--    <el-dialog :visible="visible" title="更改手机号" @close="$emit('update:visible', false)">-->
      <el-form
          class="loginForm"
          ref="loginFormRef"
          label-position="left"
      >
        <el-form-item label="手机号" prop="phone1">
          <el-input v-model="updatePhone" @blur="checkPhone"></el-input>
        </el-form-item>
        <el-form-item label="手机验证码" prop="verificationCode">
          <el-input v-model="inputCode">
            <template slot="append">
              <el-button v-if="isButtonDisabled":disabled="isClickButton" @click="disableButtonAndShowSpinner">
              <span v-if="isClickButton">
                {{countdown}}秒后再次获取
              </span>
                <span v-else>
                  发送验证码
              </span>
              </el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close(100)">取 消</el-button>
        <el-button type="primary" @click="verifyCodeAndChangePhone()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 注意：这里省略了获取验证码的axios请求逻辑和验证逻辑
// 你需要根据实际情况添加这些逻辑
export default {
  name:'ChangePhoneDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id:{
      type:Number,
      validator: function (value) {
        // 使用Number.isInteger()方法检查值是否为整数
        return Number.isInteger(value);
      },
    },
    isPhone:{
      type:Boolean,
      default:true,
    },
    onChangeSuccess: {
      type: Function,
      default: () => {
        // this.$emit("update:visible", false);
      }
    }
  },
  data() {
    return {
      inputCode: null,
      sendCode:null,
      isButtonDisabled: true, //判断展示‘获取验证码’或‘倒计时’
      isClickButton: false, //是否点击获取验证码按钮
      count: "", //倒计时时间
      countdown: 0, // 剩余秒数
      countdownInterval: null, // 存储setInterval的ID，以便可以清除它
      updatePhone:'',
      changePhoneVisible:this.visible,
      isPhone1:this.isPhone
    };
  },
  methods: {
    getNewVerifyCode() {

      // 使用axios发送请求获取验证码
      // ...
      this.$axios.get("web/sendCode",{params:{phone:this.updatePhone}}).then(res=>{
        this.sendCode = res.data.code;
      })
    },
    verifyCodeAndChangePhone() {
      // 验证验证码并发送请求修改手机号
      const regMobile = /^1[3-9]\d{9}$/;
      if (regMobile.test(this.updatePhone)&&(this.inputCode!=null||this.inputCode!='')) {
        if (this.isPhone1==true) {
          this.$axios.get("web/verifyPhoneCode", {
            params: {
              phone: this.updatePhone,
              captcha: this.sendCode,
              inputCode: this.inputCode,
              id: this.id,
            }
          }).then(res => {
            if (res.data.code == 100) {
              this.close(100);
            } else {
              this.close(5)
            }
          })
        }
        else{
          this.$axios.get("web/verifyPhoneCode2",{params:{
            phone: this.updatePhone,
              captcha: this.sendCode,
              inputCode: this.inputCode,
              id: this.id}}).then(res=>{
            if (res.data.code == 100) {
              this.close(100);
            } else {
              this.close(5)
            }
          })
        }
      }else{
        this.$message.error("请输入正确的手机号");
      }
      // 如果成功，调用onChangeSuccess
      // 如果失败，关闭弹窗
    },
    close(lit) {
      this.$emit('update:visible', false);
      this.$emit("change-success",lit);
    },
    disableButtonAndShowSpinner(){
      this.dialogVisible=true;
      this.isClickButton=true;
      this.countdown = 60;
      this.countdownInterval = setInterval(() => {
        if(this.countdown > 0){
          this.countdown--;
        }else{
          clearInterval(this.countdownInterval);
          this.isClickButton=false;
          this.countdown=0;
        }
      },1000)
      this.getNewVerifyCode();
    },
    checkPhone(){
      this.$axios.get("web/checkPhone", {params:{phone:this.updatePhone}}).then(res=>{
        // res.data.code==200?this.$message.error("该手机号已被注册"):this.$message;
        if (res.data.code==100){
          this.$message.error("该手机号已被注册");
        }
        else{

        }
      })
    },
  }
};
</script>